<template>
	<view class="set-box">
		<view class="set-item">
			<view class="set-item-list">
				<view class="set-item-list-left">
					<span>头像</span>
				</view>
				<view class="set-item-list-right" @click="show = true">
					<image :src="userNews.img" mode="" class="user-logo"></image>
					<u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<view class="set-item-list">
				<view class="set-item-list-left">
					<span>昵称</span>
				</view>
				<view class="set-item-list-right">
					<input type="text" v-model="userNews.nickname" @blur="userNameFun" style="text-align: right;" placeholder="请输入昵称"/>
				</view>
			</view>
			<view class="set-item-list">
				<view class="set-item-list-left">
					<span>手机号</span>
				</view>
				<view class="set-item-list-right">
					<span>{{userNews.phone | maskPhone}}</span>
				</view>
			</view>
		</view>
		<view class="set-item">
			<view class="set-item-list" @click="gotoAboutme">
				<view class="set-item-list-left">
					<span>关于我们</span>
				</view>
				<view class="set-item-list-right">
					<u-icon name="error-circle" size="24"></u-icon>
				</view>
			</view>
			<view class="set-item-list" @click="gotoFankui">
				<view class="set-item-list-left">
					<span>意见反馈</span>
				</view>
				<view class="set-item-list-right">
					<u-icon name="file-text" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="out-login-btn" @click="outLoginFun">
			退出登录
		</view>
		<u-action-sheet :actions="btn_list" :show="show" @select="selectImgFun" ></u-action-sheet>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	import CONSTAPI from '../../api/url-index.js'
	
	export default{
		data(){
			return{
				show:false,
				user_id:'',
				btn_list:[{
					name:'上传头像'
				},{
					name:'取消'
				}],
				userNews:{},
			}
		},
		onLoad() {
			this.userNews = uni.getStorageSync('userNews')
			this.user_id = this.userNews.id
		},
		filters:{
			maskPhone(phone) {
				if (!phone) return '';
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
		},
		methods:{
			selectImgFun(e){
				if(e.name == '上传头像'){
					let _this = this
					uni.chooseImage({
						count: 1, //默认9
						sourceType: ['album'],
						success: function (chooseImageRes) {
							uni.uploadFile({
								url:baseUrl+CONSTAPI.getUploadHaer.url, //仅为示例，非真实的接口地址
								filePath: chooseImageRes.tempFilePaths[0],
								name: 'file',
								fileName: 'file',
								formData:{
									file:'file',//页面需要上传的字段
									user_id:_this.user_id
								},
								success: (uploadFileRes) => {
									var data = JSON.parse(uploadFileRes.data)
									_this.userNews.img = data.data
									_this.show = false
									uni.setStorageSync('userNews',_this.userNews)
								}
							});
							
						}
					});
				}else{
					this.show = false
				}
			},
			userNameFun(e){
				http.getUpdateName({
					user_id:this.user_id,
					nickname:e.detail.value,
				}).then((res)=>{
					if(res.data.code == 200){
						this.user_name = e.detail.value
						uni.showToast({
							title:'修改成功',
							icon:'success'
						})
					}
				})
			},
			outLoginFun(){
				uni.showModal({
					title: '提示',
					content: '是否退出登录？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.clearStorage();
							uni.redirectTo({
								url:'/pages/index/index'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gotoAboutme(){
				uni.navigateTo({
					url:'/pages/about/me'
				})
			},
			gotoFankui(){
				uni.navigateTo({
					url:'/pages/about/fankui'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.set-box{
		width: 100%;
		min-height: 100vh;
		background: $bg-color;
		box-sizing: border-box;
		padding: 15px;
		.set-item{
			width: 100%;
			border-radius: 10px;
			background: #fff;
			overflow: hidden;
			margin-bottom: 15px;
			box-shadow: 0px 2px 5px 1px #eeeeee;
			.set-item-list{
				width: 100%;
				height: 50px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 15px;
				.set-item-list-left{
					display: flex;
					flex-direction: row;
					align-items: center;
				}
				.set-item-list-right{
					display: flex;
					flex-direction: row;
					align-items: center;
					.user-logo{
						width: 45px;
						height: 45px;
						border-radius: 50%;
						margin-right: 10px;
					}
				}
			}
		}
		.out-login-btn{
			width: 100%;
			height: 55px;
			background: #fff;
			text-align: center;
			line-height: 55px;
			font-size: 16px;
			color: #000;
			border-radius: 15px;
			box-shadow: 0px 2px 5px 1px #eeeeee;
		}
	}
</style>